<ng-container *ngIf="screenService.isDesktop();else portraitMode">
  <ng-container *ngTemplateOutlet="sideNavTpl"></ng-container>
</ng-container>
<ng-template #portraitMode>
  <!-- <ng-container *ngTemplateOutlet="sideNavTpl"></ng-container> -->
</ng-template>

<ng-template #sideNavTpl>
  <div class="side-nav-container">
    <mat-card class="user-card">
      <mat-card-title>
        <img *ngIf="userBriefInfo.avatar"
             [src]="userBriefInfo.avatar"
             class="avatar"
             alt="profile">
      </mat-card-title>
      <mat-card-content>
        <mat-divider></mat-divider>
        <section class="user-info">
          <div class="info">
            <p><small>用户名</small></p>
            <p>{{userBriefInfo.realName}} <p>
          </div>
          <div class="info">
            <p><small>职务</small></p>
            <p>{{userBriefInfo.title}}<p>
          </div>
        </section>
      </mat-card-content>
    </mat-card>

    <mat-card class="menus-card">
      <mat-card-title>
        菜单
      </mat-card-title>
      <mat-card-content>
        <mat-accordion [multi]="true">
          <mat-expansion-panel *ngFor="let menu of rootMenu.subMenus">
            <mat-expansion-panel-header>
              <mat-icon>{{menu.icon}}</mat-icon>
              {{menu.name}}
            </mat-expansion-panel-header>
            <mat-list>
              <mat-list-item class="menu-item"
                             *ngFor="let sub of menu.subMenus"
                             (click)="menuClickHandle($event, sub)">
                <mat-icon *ngIf="stateService.activedMenu === sub.name">play_arrow</mat-icon>
                {{sub.name}}
              </mat-list-item>
            </mat-list>
          </mat-expansion-panel>
        </mat-accordion>
      </mat-card-content>
    </mat-card>
  </div>
</ng-template>
